<template>
    <div>
        <div class="from">
            <div class="title">
                <h2>管理后台登录</h2>
            </div>
            <a-form :model="fromState"
                    @finish="onFinish"
                    @finishFailed="onFinishFailed"
                    autocomplete="off" name="basic">
                <a-form-item name="username" :rules="[{required: true,message: '请输入管理员账号'}]"
                             has-feedback>
                    <a-input size="large" v-model:value="fromState.username" placeholder="请输入用户名">
                        <template #prefix>
                            <user-outlined/>
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item :rules="[{ required: true, message: '请输入管理员密码' }]" name="password"
                             has-feedback>
                    <a-input type="password" size="large" v-model:value="fromState.password" placeholder="请输入密码">
                        <template #prefix>
                            <lock-outlined/>
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item>
                    <a-button style="width: 100%" size="large" html-type="submit" type="primary">登录
                    </a-button>
                </a-form-item>
            </a-form>
<!--            <div style="fontSize:12px;color: #888888;margin-top: 30px">@lht毕业设计</div>-->
        </div>
    </div>
</template>

<script>
    import {request} from "@/utils/request";
    import api from "@/constants/api";
    import StandardTableList from "@/components/StandardTableList";
    import {message} from 'ant-design-vue';

    export default {
        name: 'Login',
        components: {StandardTableList},
        data() {
            return {
                fromState: {
                    username: '',
                    password: '',
                }
            }
        },
        mounted() {

        },
        methods: {
            onFinish(values) {
                const data = new FormData();
                data.append("username", values.username);
                data.append("password", values.password);
                request({
                    url: api.ADMIN_LOGIN,
                    data: data,
                    method: 'POST',
                    pureData: false,
                }).then(res => {
                    if (res.code === 200) {
                        message.success("登录成功");
                        localStorage.setItem("token", res.data);
                        localStorage.setItem("username", values.username);
                        this.$router.push({name: "index"})
                    } else {
                        message.warn("密码错误");
                    }
                })
            },
            onFinishFailed(errorInfo) {
                console.log('Failed:', errorInfo);
            }
        }
    }
</script>

<style scoped>
    .from {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -160px 0 0 -160px;
        width: 320px;
        height: 350px;
        padding: 36px;
        box-shadow: 0 0 100px rgba(0, 0, 0, .08);
        border-radius: 8px;
    }

    .title {
        padding: 10px;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
    }
</style>